<!--
@license
Copyright 2016 Google LLC
SPDX-License-Identifier: Apache-2.0
-->

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="Lighthouse Team">
  <meta name="viewport" content="width=device-width">
  <title>Lighthouse</title>
  <link rel="stylesheet" href="styles/lighthouse.css">
</head>
<body>
  <main class="main" role="main">
    <div class="section section--run">
      <img class="header__icon" src="images/lh_logo.svg" width="75" height="75"></svg>
      <!-- <object data="images/lh_logo.svg" type="image/svg+xml"></object> -->
      <button class="button button--generate">Generate report</button>
      <span class="psi-disclaimer"><a href="https://developers.google.com/speed/docs/insights/v5/get-started?utm_source=lh-chrome-ext" title="https://developers.google.com/speed/docs/insights/v5/get-started" target="_blank" rel="noopener nofollow">Uses the PSI API</a></span>
      <div class="errormsg"></div>
    </div>
    <div class="section section--options">
      <form class="options__form">
        <div class="options__group">
          <h3 class="options__title">Show results in:</h3>
          <ul class="options__list options__backend">
            <!-- filled dynamically -->
          </ul>
        </div>

        <div class="options__group">
          <h3 class="options__title">Device</h2>
          <ul class="options__list options__device">
            <li>
              <label>
                <input type="radio" name="device" value="mobile"></input><span>Mobile</span>
              </label>
            </li>
            <li>
              <label>
                <input type="radio" name="device" value="desktop"></input><span>Desktop</span>
              </label>
            </li>
          </ul>
        </div>

        <div class="options__group">
          <h3 class="options__title">Categories</h3>
          <ul class="options__list options__categories">
            <!-- filled dynamically -->
          </ul>
        </div>

        <div class="options__group options__group--locales">
          <h3 class="options__title">Locale</h3>
          <select class="options__select options__locales">
            <!-- filled dynamically -->
          </select>
        </div>
      </form>
    </div>
  </main>

  <aside class="section section--secondary-panel">
    <div class="hidden browser-brand browser-brand--chrome">
      <h2 class="section--header">Chrome DevTools</h2>
      <span class="section--description">
        This extension uses the PSI API, so it cannot be used to test sites hosted locally or behind auth. Instead, you can run Lighthouse via the DevTools Lighthouse panel.
        <br><br>
        Shortcut to open DevTools: <span class="devtools-shortcut"><!-- filled dynamically --></span>
      </span>
    </div>
    <div class="hidden browser-brand browser-brand--firefox">
      <h2 class="section--header">Node CLI</h2>
      <span class="section--description">
        This extension uses the PSI API, so it cannot be used to test sites hosted locally or behind auth. Instead, you can run Lighthouse via the <a href="https://github.com/GoogleChrome/lighthouse#using-the-node-cli">Node CLI</a>.
      </span>
    </div>
  </aside>

  <script src="scripts/popup-bundle.js"></script>
</body>
</html>
